<!--组件-输入框-->
<template>
  <div class="Vinput">

    <text class="font30 text2 title">{{title}}</text>

    <!--输入框-->
    <div :class="['frame', 'bg2', this.select ? 'main-b1' : '']" @click="frameClick">
      
      <input class="input font30 fontz text1"
      v-model="value"
      :ref="'input'"
      :placeholder="placeholder"
      :type="type"
      @input="onInput" @focus="onFocus" @blur="onBlur">

      <template v-if="unit">
        <div class="mr20"></div>
        <text class="font30 fontz text3">{{unit}}</text>
      </template>
    </div>
  </div>
</template>

<script>

export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{
    value: { //值
      type:String,
      default:'',
    },

    type: { //输入类型
      type:String,
      default:'number',
    },
    
    title: { //标题
      type:String,
      default:undefined,
    },

    placeholder: { //占位符
      type:String,
      default:'',
    },

    unit: { //单位
      type:String,
      default:undefined,
    },
  },

  data() {
    return {
      select:false,
    };
  },

  mounted(){
  },

  methods:{

    /**********************************************输入框回调*/
    //输入框-选中
    onFocus(e) {

      this.select = true;
      this.$emit("focus", e);
    },

    //输入框-取消选中
    onBlur(e) {

      this.select = false;
      this.$emit("blur", e);
    },

    //输入内容改变
    onInput(e){

      this.$emit("change", e.value);
      this.$emit("input", e);
    },

    /**********************************************点击回调*/
    //输入框点击
    frameClick(){
      this.$refs.input && this.$refs.input.focus();
    }
  }
}
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.Vinput {
  flex-direction: row;
  align-items: center;
}
.title{
  width: 170px;
  margin-right: 20px;
}
.frame{
  flex: 1;
  flex-direction: row;
  align-items: center;

  height: 88px;
  border-radius: 10px;

  border-width: 2px;
  border-color: transparent;

  padding: 0 30px;
}
.input{
  flex: 1;
  placeholder-color:#616F93;
}
</style>
